<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-select v-model="queryParams.classifyId" placeholder="请选择捶一捶商品所属分类" clearable size="small">
        <el-option :key="classify.classifyId" :label="classify.classifyName" :value="classify.classifyId"
                   v-for="classify in (goodsClassifyListForOne)">{{classify.classifyName}}
        </el-option>
      </el-select>
      <el-form-item  prop="goodsName">
        <el-input
          v-model="queryParams.goodsName"
          placeholder="请输入捶一捶商品名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item  prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择捶一捶商品状态" clearable size="small">
          <el-option label="下架" value="10"/>
          <el-option label="上架" value="20"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:goods:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:goods:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:goods:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:goods:export']"
        >导出
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="goodsList" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="expand" label="详情" v-if="isExpand">
        <template slot-scope="scope">
          <el-table :data="scope.row.goodsKeepList" border
                    :summary-method="getSummaries"
                     show-summary
                    :header-cell-style="headClass">
            <el-table-column label="库存ID" align="center" prop="keepId"/>
            <el-table-column label="店铺名称" align="center" prop="goodsName"/>
            <el-table-column label="捶一捶价格" align="center" prop="goodsPrice"/>
            <el-table-column label="划线价格" align="center" prop="linePrice">
              <template slot-scope="scope" v-if="scope.row.linePrice!=undefined">
                <s>{{scope.row.linePrice}}</s>
              </template>
            </el-table-column>
            <el-table-column label="商品状态" align="center" prop="status">
              <template slot-scope="scope">
                <el-tag type="warning" v-if="scope.row.status == 10">禁用</el-tag>
                <el-tag type="success" v-if="scope.row.status == 20">启用</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="商品库存" align="center" prop="keepNum">
            </el-table-column>
            <el-table-column label="商品销量" align="center" prop="saleNum"/>
          </el-table>
        </template>
      </el-table-column> -->
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="ID" align="center" prop="goodsId"/>
      <el-table-column label="所属分类" align="center" prop="classifyName"/>
      <el-table-column label="商品名称" align="center" prop="goodsName" width="150"/>
      <el-table-column label="商品主图" align="center" prop="goodsImg">
        <template slot-scope="scope" v-if="scope.row.goodsImg!=null">
          <el-image :preview-src-list="scope.row.goodsImg.split(',')" style="width: 30px;height: 30px;" shape="square"
                    :src="image" :key="image" v-for="image in scope.row.goodsImg.split(',')"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="捶数" align="center" prop="groupNum" width="150"/>
      <el-table-column label="商品价格" align="center" prop="goodsPrice"/>
<!--      <el-table-column label="划线价格" align="center" prop="linePrice">-->
<!--        <template slot-scope="scope" v-if="scope.row.linePrice!=undefined">-->
<!--          {{scope.row.linePrice}}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="商品状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.status == 10">下架</el-tag>
          <el-tag type="success" v-if="scope.row.status == 20">上架</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="捶一捶商品所属" align="center" prop="addType"  width="150">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.addType == 10">平台</el-tag>
          <el-tag type="info" v-if="scope.row.addType == 20">商家</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="280" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-hasPermi="['system:goods:keep']"
            @click="handleSkuUpdate(scope.row)"
          >
              库存配置
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleChangeState(scope.row)"
            v-if="scope.row.status=='10'"
            v-hasPermi="['system:goods:changeState']"
          >上架
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleChangeState(scope.row)"
            v-if="scope.row.status=='20'"
            v-hasPermi="['system:goods:changeState']"
          >下架
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:goods:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:goods:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改商品信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <!--基础信息-->
        <el-row justify="start" style="display: flex">
          <el-form-item label="所属分类" prop="classifyId">
            <el-select v-model="form.classifyId" placeholder="请选择捶一捶商品所属分类" clearable size="small">
              <el-option :key="classify.classifyId" :label="classify.classifyName" :value="classify.classifyId"
                         v-for="classify in (goodsClassifyList)">{{classify.classifyName}}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品标签">
            <el-select v-model="form.goodsMark" multiple placeholder="请选择商品标签" clearable size="small">
              <el-option
                v-for="dict in goodsLableList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="排序编号" prop="sort">
            <el-input v-model="form.sort" type="number" placeholder="请输入商品排序号"/>
          </el-form-item>
        </el-row>
        <el-row justify="start" style="display: flex">
          <el-form-item label="商品状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio label="10">下架</el-radio>
              <el-radio label="20">上架</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <!--价钱状态-->
        <el-row
          class="customWidth"
          style="margin-bottom:30px;background:#ecf8ff;padding:30px 30px 0 30px;"
          v-for="(attrItem, index) in form.attrRows"
          :key="index"
        >
          <el-col>
            <el-row type="flex" justify="start">
              <el-form-item
                label="商品名称"
                :prop="'attrRows.' + index + '.goodsName'"
                :rules="{
                  required: true, message: '属性不能为空', trigger: ['blur', 'change']
                }"
              >
                <el-input v-model="attrItem.goodsName" placeholder="请输入商品名称"/>
              </el-form-item>
              <el-form-item
                label="属性"
                :prop="'attrRows.' + index + '.attributes'"
                :rules="{
                required: true, message: '属性不能为空', trigger: ['blur', 'change']
              }"
              >
                <el-input v-model="attrItem.attributes" placeholder="请输入商品属性"/>
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="start">
              <el-form-item
                label="捶数"
                :prop="'attrRows.' + index + '.groupNum'"
                :rules="{
                required: true, message: '捶子次数不能为空', trigger: ['blur', 'change']
              }"
              >
                <el-input v-model="attrItem.groupNum" type="number" placeholder="请输入捶子次数"/>
              </el-form-item>
              <el-form-item
                label="拼团价格"
                :prop="'attrRows.' + index + '.groupPrice'"
                :rules="{
              required: true, message: '拼团价格不能为空', trigger: ['blur', 'change']
            }"
              >
                <el-input-number v-model="attrItem.groupPrice" :min="0" :precision="2" :step="0.1"/>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col>
            <el-form-item label="商品主图" :prop="'attrRows.' + index + '.goodsImg'">
              <el-upload
                :action="commonUploadApi"
                :accept="'.png,.jpg'"
                :show-file-list="false"
                :headers="headers"
                :on-success="(response, file, fileList) => {handleSuccessGoodsImage(response, file, fileList, index)}">
                <img v-if="attrItem.goodsImg" :src="attrItem.goodsImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row style="margin-bottom:30px;">
          <el-button @click="addAttributes" type="primary" icon="el-icon-plus">新增属性</el-button>
        </el-row> -->

        <el-form-item label="商品图集" prop="listImg">
          <el-upload
            :action="commonUploadApi"
            :accept="'.png,.jpg'"
            :show-file-list="true"
            :multiple="true"
            :limit="7"
            list-type="picture-card"
            :file-list="form.listImg"
            :class="{ hideUpload: form.listImg && form.listImg.length >= 7 }"
            :headers="headers"
            :on-success="handleUploadListImg"
            :on-exceed="() => handleExceedListImg(7)"
            :on-remove="handleRemoveListImg"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <!-- <el-form-item label="商品内容" prop="goodsContent">
          <Editor v-model="form.goodsContent"/>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>



    <!-- 添加或修改商品库存信息对话框 -->
    <el-dialog title="补贴商品库存配置" :visible.sync="openSku" width="500px" append-to-body>
      <el-form ref="skuForm" :model="skuForm" :rules="skuRules" label-width="80px">
        <el-form-item label="商品库存" prop="keepNum">
          <el-input v-model="skuForm.keepNum" placeholder="请输入库存"/>
        </el-form-item>
        <el-form-item label="商品销量" prop="saleNum">
          <el-input-number v-model="skuForm.saleNum" :min="0" :step="1"/>
        </el-form-item>
        <el-form-item label="现价" prop="goodsPrice">
          <el-input-number v-model="skuForm.goodsPrice" :min="0" :precision="2" :step="0.1"/>
        </el-form-item>
        <el-form-item label="划线价格" prop="linePrice">
          <el-input-number v-model="skuForm.linePrice" :min="0" :precision="2" :step="0.1"/>
        </el-form-item>
        <el-form-item label="商品状态" prop="status">
          <el-radio-group v-model="skuForm.status">
            <el-radio label="10">下架</el-radio>
            <el-radio label="20">上架</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSkuForm">确 定</el-button>
        <el-button @click="skuCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {listBeatGoods, getGoods, delGoods, addBeatGoods, updateBeatGoods, exportGoods,changeState,getKeepGoods} from "@/api/system/goods";
  import {addKeep,updateKeep} from "@/api/system/keep";
  import {mapGetters} from "vuex";
  import {getToken} from "@/utils/auth";
  import Editor from '@/components/Editor';
  import {getGoodsClassify,getGoodsClassifyListForOne} from "@/api/system/classify";
  import store from '@/store';
  import {remove} from "@/api/tool/file";

  export default {
    name: "Goods",
    components: {
      Editor
    },
    data() {
      return {
        //
        isExpand: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        //商品标签
        goodsLableList: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 商品信息表格数据
        goodsList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        openSku: false,
        //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++查看图集操作
        dialogImageUrl: '',
        dialogVisible: false,
        fileList: [],
        // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          classifyId: undefined,
          goodsName: undefined,
          goodsImg: undefined,
          goodsContent: undefined,
          goodsType:"40",
          goodsPrice: undefined,
          linePrice: undefined,
          groupPrice: undefined,
          attributes: undefined,
          attributesName: undefined,
          sort: undefined,
          goodsMark: undefined,
          status: undefined,
          addType: undefined,
          shopId: undefined,
          delFalg: undefined
        },
        headers: {Authorization: "Bearer " + getToken()},
        // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++表单参数
        form: {},
        skuForm:{},
        //商品分类集合
        goodsClassifyListForOne: [],
        goodsClassifyList: [],
        // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++表单校验
        rules: {
          classifyId: [
            {required: true, message: "所属分类不能为空", trigger: "blur"}
          ],
          goodsName: [
            {required: true, message: "商品名称不能为空", trigger: "blur"}
          ],
          goodsImg: [
            {required: true, message: "商品图片不能为空", trigger: "blur"}
          ],
          status: [
            {required: true, message: "请选择商品状态", trigger: "blur"}
          ],
          goodsContent: [
            {required: true, message: "请输入商品内容", trigger: "blur"}
          ],
          groupPrice: [
            {required: true, message: "请输入拼团价格", trigger: "blur"}
          ],
          listImg: [
            { required: true, message: "列表图片不能为空", trigger: "blur" },
          ],
          attributes: [
            {required: true, message: "请输入属性", trigger: "blur"}
          ],
          attributesName: [
            {required: true, message: "请输入属性名", trigger: "blur"}
          ],
          sort: [
            {required: true, message: "请输入排序数", trigger: "blur"}
          ],
        },
        skuRules:{
          keepNum: [
            {required: true, message: "库存不能为空", trigger: "blur"}
          ],
          saleNum: [
            {required: true, message: "销量不能为空", trigger: "blur"}
          ],
          goodsPrice: [
            {required: true, message: "商品价格不能为空", trigger: "blur"}
          ],
          linePrice: [
            {required: true, message: "划线价格不能为空", trigger: "blur"}
          ],
          status: [
            {required: true, message: "商品状态不能为空", trigger: "blur"}
          ]
        }
      };
    },
    computed: {
      ...mapGetters([
        'commonUploadApi'
      ])
    },
    created() {
      const roles = store.getters && store.getters.roles
      if (roles.indexOf('admin')>-1){
        this.isExpand=true;
      }
      this.getList();
      getGoodsClassifyListForOne().then(response => {
        this.goodsClassifyListForOne = response.data;
      });
      getGoodsClassify().then(response => {
        this.goodsClassifyList = response.data;
      });
      this.getDicts("goods_mark").then(response => {
        this.goodsLableList = response.data;
      });
    },
    methods: {
      // 删除属性
      removeAttribute(index) {
        let arr = [...this.form.attrRows]
        arr.splice(index, 1)
        this.form.attrRows = arr
      },
      // 添加属性
      addAttributes() {
        this.form.attrRows.push({
          attributes: undefined,
          goodsPrice: 0,
          linePrice: 0,
          groupPrice: 0,
          groupNum: 0
        })
      },
      //商户更改商品状态
      handleChangeState(row){
        let str="下架";
        if (row.status=='10'){
          str="上架";
        }
        this.$confirm('是否确认'+str+'选择的商品?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return changeState(row);
        }).then(() => {
          this.getList();
          this.msgSuccess("已"+str);
        }).catch(function () {
        });
      },
      goodsLableFormat(row, column) {
        let strArray = [];
        let markArray = row.goodsMark.split(',');
        for (let i = 0; i < markArray.length;i++){
          strArray.push(this.selectDictLabel(this.goodsLableList, markArray[i]))
        }
        return strArray.join(',');
      },
      getSummaries(param) {
        const {columns, data} = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 4) {
            sums[index] = '总计:';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (index == 5 || index == 6) {
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
              if (index == 5) {
                sums[5] += ' (当前)';
              } else if (index == 6) {
                sums[6] += ' (已售)';
              }
            }
          }
        });
        return sums;
      },
      //+++++++++++++++++++++++++++++++++++++上传商品主图操作
      handleSuccessGoodsImage(response, file, fileList, index) {
        let data = [...this.form.attrRows]
        data[index].goodsImg = response.url;
        this.form.attrRows = [...data]
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleVideoRemove() {
        this.$refs.goodsVideoUpload.clearFiles();
        remove(this.form.goodsVideo).then(response => {
          if (response.data.code == '200'){
            this.msgSuccess("删除成功");
          }else {
            this.msgError("删除失败");
          }
        });
        this.form = {
          ...this.form,
          goodsVideo: ''
        }
      },
      uploadVideoSuccess(response, file, fileList) {
        this.form = {
          ...this.form,
          goodsVideo: response.url
        }
      },
      uploadChangeUrl(filelist) {
        let arr = [...filelist]
        return arr.map((item) => {
          if(item.status == 'success') {
            return {
              ...item,
              url: item.response.url
            }
          } else {
            return null
          }
        });
      },
      // 商品图集
      handleUploadListImg(response, file, filelist) {
        this.form.listImg = this.uploadChangeUrl(filelist)
      },
      handleRemoveListImg(file, filelist) {
        this.form.listImg = this.uploadChangeUrl(filelist)
      },
      handleExceedListImg(limit) {
        this.msgError(`不能超过${limit}张`);
        return false;
      },

      arrToStr(arr) {
        if(arr.length <= 0) return ''
        return arr
          .map((item) => {
            return item.response.url;
          })
          .join(",");
      },
      strToArr(str) {
        if (str == '') return [];
        return str.split(",").map((item) => {
          return {
            url: item,
            response: {
              url: item,
            },
          };
        });
      },
      /** 查询商品信息列表 */
      getList() {
        this.loading = true;
        listBeatGoods(this.queryParams).then(response => {
          this.goodsList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
        this.addAttributes()
      },
      skuCancel(){
        this.openSku = false;
        this.skuReset();
      },
      skuReset(){
        this.skuForm = {
          keepId: undefined,
          goodsId: undefined,
          keepNum: undefined,
          saleNum: '0',
          goodsPrice: undefined,
          linePrice: undefined,
          status: "20",
          goodsMark: undefined,
          delFalg: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined
        };
        this.resetForm("skuForm");
      },
      // 表单重置
      reset() {
        this.form = {
          goodsVideo: undefined,
          goodsId: undefined,
          classifyId: undefined,
          goodsName: undefined,
          goodsImg: undefined,
          goodsContent: undefined,
          goodsType: "40",
          goodsPrice: 0,
          linePrice: 0,
          goodsMark: undefined,
          status: "20",
          addType: undefined,
          shopId: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined,
          delFalg: undefined,
          listImg: [],
          attrRows: [
            // {
            //   attributes: undefined,
            //   goodsPrice: 0,
            //   linePrice: 0,
            //   groupPrice: 0,
            //   groupNum: 0
            // },
          ]
        };
        this.fileList = [];
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.goodsId)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.addAttributes()
        this.open = true;
        this.title = "添加补贴商品信息";
      },
      handleSkuUpdate(row){
        this.skuReset();
        const goodsId = row.goodsId || this.ids
        getKeepGoods(goodsId).then(response => {
          if (response.data != null){
            this.skuForm = response.data;
          }
          this.skuForm.goodsId = goodsId;
          this.skuForm.goodsPrice = row.goodsPrice;
          this.skuForm.linePrice = row.linePrice;
          //处理图片
          this.openSku = true;
        });
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const goodsId = row.goodsId || this.ids
        getGoods(goodsId).then(response => {
          this.form = response.data;
          let listImg = this.strToArr(this.form.listImg || "");
          this.form = {
            ...this.form,
            listImg
          };
          //处理图片
          // if (this.form.goodsMark != null) {
          //   this.form.goodsMark = this.form.goodsMark.split(",");
          // }
          this.open = true;
          this.title = "修改批发商品信息";
        });
      },
      submitSkuForm:function(){
        this.$refs["skuForm"].validate(valid => {
          if (valid) {
            if (this.skuForm.keepId != undefined) {
              updateKeep(this.skuForm).then(response => {
                this.msgSuccess("修改成功");
                this.openSku = false;
                this.getList();
              });
            } else {
              addKeep(this.skuForm).then(response => {
                this.msgSuccess("新增成功");
                this.openSku = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form = {
              ...this.form,
              listImg: this.arrToStr(this.form.listImg || [])
            };
            
            this.form.goodsMark = this.form.goodsMark instanceof Array ? this.form.goodsMark.join(",") : this.form.goodsMark;
            if (this.form.goodsId != undefined) {
              updateBeatGoods(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addBeatGoods(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const goodsIds = row.goodsId || this.ids;
        this.$confirm('是否确认删除商品信息编号为"' + goodsIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delGoods(goodsIds);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function () {
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有商品信息数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return exportGoods(queryParams);
        }).then(response => {
          this.download(response.data);
        }).catch(function () {
        });
      },
      headClass() {
        return 'text-align: center;background:#eef1f6;'
      },
    }
  };
</script>
<style scoped>
  /*上传图片*/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border: 1px solid #c0ccda;
  }

  .avatar {
    width: 70px;
    height: 70px;
    display: block;
  }

  /*动态标签*/
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-table th >.SkuClass{
    border: 1px solid red;
    background-color: red;
  }

  .customWidth /deep/ .el-input-number {
    width: 140px !important;
  }
</style>
